<template>
	<div>
		<div class="box">
			<div class="title">基础信息</div>
			<uni-forms
				ref="form"
				:model="currentInfoData"
				validate-trigger="bind"
				:label-position="state == 'write' ? 'top' : 'left'"
				label-width="auto">
				<FromItem
					label="购买类型"
					:required="true"
					:state="state"
					name="insuranceBuyType">
					<ARadioGroup
						:state="state"
						:disabled="state == 'disabled'"
						@change="change_insuranceBuyType"
						v-model="currentInfoData.insuranceBuyType"
						:dict="{ list: insuranceBuyTypeList }"></ARadioGroup>
				</FromItem>
				<FromItem
					label="购买方式"
					:required="true"
					:state="state"
					name="insuranceBuyModeType">
					<view v-if="state == 'readonly'">
						{{
							A_review({
								value: currentInfoData.insuranceBuyModeType,
								dict: {
									list: insuranceBuyModeTypeList,
								},
							})
						}}
					</view>
					<ARadioGroup
						v-else
						:state="state"
						:disabled="state == 'disabled'"
						v-model="currentInfoData.insuranceBuyModeType"
						:dict="{
							list: insuranceBuyModeTypeList,
						}"></ARadioGroup>
				</FromItem>
				<FromItem
					label="保险公司"
					:required="true"
					:state="state"
					name="insuranceCompanyKey">
					<view v-if="state == 'readonly'">
						{{
							A_review({
								value: currentInfoData.insuranceCompanyKey,
								dict: {
									list: dict.type.in_su_rance_com_pany,
								},
							})
						}}
					</view>
					<ASelectUni
						v-else
						v-model="currentInfoData.insuranceCompanyKey"
						:dict="{
							list: dict.type.in_su_rance_com_pany,
						}"
						@change="change_insuranceCompanyKey"></ASelectUni>
				</FromItem>
				<FromItem
					label="保险标准"
					:required="true"
					:state="state"
					name="insuranceStandardType">
					<view v-if="state == 'readonly'">
						{{
							A_review({
								value: currentInfoData.insuranceStandardType,
								dict: {
									list: dict.type
										.quota_insurance_standard_type,
								},
							})
						}}
					</view>
					<ARadioGroup
						v-else
						v-model="currentInfoData.insuranceStandardType"
						:dict="{
							list: dict.type.quota_insurance_standard_type,
						}"
						:state="state"
						:disabled="state == 'disabled'"
						@change="change_insuranceStandardType"></ARadioGroup>
				</FromItem>
			</uni-forms>

			<uni-forms
				ref="form1"
				:model="currentInfoData"
				validate-trigger="bind"
				label-width="auto"
				class="table"
				:rules="rules">
				<uni-table border stripe emptyText="暂无更多数据" class="table">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="100px">操作</uni-th>
						<uni-th align="center">险种</uni-th>
						<uni-th align="center">保额</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr
						v-for="(item, index) in currentInfoData.insuranceList">
						<uni-td align="center" class="td">
							<view v-if="state == 'readonly'">
								<uni-icons
									v-if="item.selectedType == '1'"
									type="checkmarkempty"></uni-icons>
							</view>
							<div v-else>
								<div
									v-if="item.operationType == '2'"
									@click="change_selectedType(item)"
									class="handler">
									<uni-icons
										v-if="item.selectedType == '1'"
										type="checkmarkempty"></uni-icons>
									<uni-icons
										v-else
										type="closeempty"
										class="handler-xicon"></uni-icons>
								</div>
								<div v-else>
									<div
										@click="
											remove_insuranceList(item, index)
										">
										删除
									</div>
								</div>
							</div>
						</uni-td>
						<uni-td align="center" class="td">
							<view v-if="state == 'readonly'">
								{{ item.insuranceItemNameVal }}
							</view>
							<div v-else>
								<!-- 	:required="
										item.selectedType == '1' && item.isCoverageAmount == '1'
											? true
											: false
									" -->
								<uni-forms-item
									:required="false"
									:state="state"
									:showRequiredIcon="false"
									:name="[
										'insuranceList',
										index,
										'insuranceItemNameVal',
									]">
									<!-- :name="`insuranceList[${index}].insuranceItemNameVal`" -->
									<!-- 套餐 -->
									<div v-if="item.operationType == '2'">
										{{ item.insuranceItemNameVal }}
									</div>
									<!-- 新增 -->
									<div v-if="item.operationType == '1'">
										<uni-easyinput
											size="mini"
											v-model="item.insuranceItemNameVal"
											placeholder="请输入险种"></uni-easyinput>
									</div>
								</uni-forms-item>
							</div>
						</uni-td>
						<uni-td align="center" class="td">
							<view v-if="state == 'readonly'">
								<div v-if="item.operationType == '2'">
									<div v-if="item.isCoverageAmount == '0'">
										<div v-if="item.selectedType == '1'">
											已加入
										</div>
										<div v-else>未加入</div>
									</div>
									<div v-if="item.isCoverageAmount == '1'">
										{{ item.sumInsuredVal }}
									</div>
								</div>
								<div v-if="item.operationType == '1'">
									{{ item.sumInsuredVal }}
								</div>
							</view>
							<div v-else>
								<div v-if="item.operationType == '2'">
									<!-- 套餐 -->
									<div
										v-if="
											currentInfoData.insuranceStandardType !=
											'4'
										">
										<!-- 套餐abc -->
										<div
											v-if="item.isCoverageAmount == '0'">
											<div
												v-if="item.selectedType == '1'">
												已加入
											</div>
											<div v-else>未加入</div>
										</div>
										<div
											v-if="item.isCoverageAmount == '1'">
											{{ item.sumInsuredVal }}
										</div>
									</div>
									<div
										v-if="
											currentInfoData.insuranceStandardType ==
											'4'
										">
										<!-- 套餐自定义 -->
										<!-- :required="item.selectedType == '1' ? true : false" -->
										<uni-forms-item
											:required="false"
											v-if="item.isCoverageAmount == '1'"
											:showRequiredIcon="false"
											:state="state"
											:name="[
												'insuranceList',
												index,
												'sumInsuredVal',
											]">
											<!-- 有选项 -->
											<ASelectUni
												v-model="item.sumInsuredVal"
												:dict="{
													list: jsonArr(
														item.coverageAmountList,
													),
												}"></ASelectUni>
										</uni-forms-item>
										<div
											v-if="item.isCoverageAmount == '0'">
											<!-- 没选项 -->
											<div
												v-if="item.selectedType == '1'">
												已加入
											</div>
											<div v-else>未加入</div>
										</div>
									</div>
								</div>
								<div v-if="item.operationType == '1'">
									<!-- 自定义 -->
									<!-- :required="item.selectedType == '1' ? true : false" -->
									<uni-forms-item
										:required="false"
										:showRequiredIcon="false"
										:state="state"
										:name="[
											'insuranceList',
											index,
											'sumInsuredVal',
										]">
										<!-- :name="`insuranceList[${index}].sumInsuredVal`" -->
										<uni-easyinput
											class="uni-input"
											size="mini"
											v-model="item.sumInsuredVal"
											type="number"
											placeholder="请输入金额"></uni-easyinput>
									</uni-forms-item>
								</div>
							</div>
						</uni-td>
					</uni-tr>
				</uni-table>
			</uni-forms>
			<button
				v-if="state === 'write'"
				type="primary"
				@click="push_insuranceList">
				增加
			</button>
		</div>
	</div>
</template>

<script>
	import FromItem from '../formItem/index.vue';

	export default {
		name: '',
		components: { FromItem },
		dicts: [
			'in_su_rance_com_pany',
			'quota_insurance_standard_type',
			'pro_duct_in_sur_ance_a',
			'pro_duct_in_sur_ance_b',
			'pro_duct_in_sur_ance_c',
		],
		props: {},
		inject: [
			'details_provide',
			'config_provide',
			'deptList_provide',
			'state_provide',
			'insuranceList_provide',
		],
		data() {
			return {};
		},
		computed: {
			rules() {
				let rule = {};
				this.currentInfoData?.insuranceList?.map((item, index) => {
					// 险种
					rule[
						this.A_realName(
							`insuranceList[${index}].insuranceItemNameVal`,
						)
					] = {
						rules:
							item?.selectedType == '1' &&
							item.operationType == '1'
								? [
										{
											required: true,
											errorMessage: '请输入险种',
										},
								  ]
								: [],
					};
					// 保额

					rule[
						this.A_realName(`insuranceList[${index}].sumInsuredVal`)
					] = {
						rules:
							(item?.selectedType == '1' &&
								item?.isCoverageAmount == '1') ||
							item.operationType == '1'
								? [
										{
											required: true,
											errorMessage:
												item.operationType == '1'
													? '请输入保额'
													: '请选择保额',
										},
								  ]
								: [],
					};
				});
				return rule;
			},
			details() {
				return this.details_provide();
			},
			config() {
				return this.config_provide();
			},
			deptList() {
				return this.deptList_provide();
			},
			state() {
				return this.state_provide();
			},
			insuranceList() {
				return this.insuranceList_provide();
			},
			currentInfoData() {
				return this.details.productList?.[0] ?? {};
			},
			insuranceBuyTypeList() {
				let arr = [];
				let configList =
					this.config?.quotationProductSchemeAttributeOption
						?.insuranceOptions;
				if (configList?.includes(1)) {
					arr.push({
						value: '1',
						label: '首年',
					});
				}
				if (configList?.includes(2)) {
					arr.push({
						value: '2',
						label: '合同租期',
					});
				}
				arr.push({
					value: '3',
					label: '客户购买',
				});
				return arr;
			},
			insuranceBuyModeTypeList() {
				let arr = [];
				if (this.Empty(this.currentInfoData.insuranceBuyType)) {
					let configList =
						this.config?.quotationProductSchemeAttributeOption
							?.insuranceOptions;
					if (configList?.includes(1) || configList?.includes(2)) {
						arr.push(
							{
								value: '1',
								label: '我司购买',
							},
							{
								value: '2',
								label: '店保',
							},
						);
					}
					arr.push({
						value: '3',
						label: '客户自购',
					});
				} else {
					if (
						this.currentInfoData.insuranceBuyType == '1' ||
						this.currentInfoData.insuranceBuyType == '2'
					) {
						arr = [
							{
								value: '1',
								label: '我司购买',
							},
							{
								value: '2',
								label: '店保',
							},
						];
					} else {
						arr = [
							{
								value: '3',
								label: '客户自购',
							},
						];
					}
				}
				return arr;
			},
		},
		filters: {},
		created() {},
		mounted() {},
		methods: {
			jsonArr(str) {
				let arr = str;
				try {
					if (typeof str == 'string' && this.notEmpty(str)) {
						arr = JSON.parse(str);
					}
				} catch (e) {
					console.log(e);
					//TODO handle the exception
				}
				return arr;
			},
			remove_insuranceList(row, index) {
				uni.showModal({
					content: `是否删除${
						row.insuranceItemNameVal
							? row.insuranceItemNameVal
							: '该'
					}险种？`,
					success: res => {
						if (res.confirm) {
							this.currentInfoData.insuranceList.splice(index, 1);
						}
					},
				});
			},
			push_insuranceList() {
				if (!Array.isArray(this.currentInfoData.insuranceList)) {
					this.$set(this.currentInfoData, 'insuranceList', []);
				}
				let obj = {
					insuranceItemNameKey: '',
					insuranceItemNameVal: '',
					selectedType: '1',
					operationType: '1',
					irrespectiveType: '1',
					sumInsuredVal: undefined,
					isCoverageAmount: '1',
					coverageAmountList: '[]',
				};
				this.currentInfoData.insuranceList.push(obj);
				this.$emit('itemCollapse');
			},
			change_selectedType(row) {
				if (row.selectedType == '1') {
					this.$set(row, 'selectedType', '2');
				} else {
					this.$set(row, 'selectedType', '1');
				}
			},
			change_insuranceStandardType({ val, item }) {
				this.initDetaultInsuranceList(val, true);
			},
			initDetaultInsuranceList(type) {
				let arr = [];
				let list = [];
				switch (type) {
					case '1':
						list = this.dict.type.pro_duct_in_sur_ance_a;
						break;
					case '2':
						list = this.dict.type.pro_duct_in_sur_ance_b;
						break;
					case '3':
						list = this.dict.type.pro_duct_in_sur_ance_c;
						break;
				}
				let insuranceList = [];
				if (type != '4') {
					this.insuranceList?.map(e => {
						let item = list.find(item => {
							return (
								item.label?.trim() ==
								e.insuranceItemName?.trim()
							);
						});

						if (item) {
							insuranceList.push({
								// ...e,
								insuranceItemNameKey: e.insuranceItemId,
								insuranceItemNameVal: e.insuranceItemName,
								isCoverageAmount:
									e.isCoverageAmount?.toString(),
								// coverageAmountList: JSON.stringify(e.coverageAmountList),
								selectedType: '1',
								operationType: '2',
								// irrespectiveType: '1' // 不计免赔
								sumInsuredVal: item?.raw?.remark
									? item?.raw?.remark?.trim() * 1
									: undefined,
							});
						}
					});
					this.$set(
						this.currentInfoData,
						'insuranceList',
						insuranceList,
					);
				} else {
					insuranceList = this.A_deepClone(this.insuranceList);

					insuranceList.map(item => {
						arr.push({
							selectedType: '1',
							operationType: '2',
							insuranceItemNameKey: item.insuranceItemId,
							insuranceItemNameVal: item.insuranceItemName,
							isCoverageAmount: item.isCoverageAmount?.toString(),
							sumInsuredVal: undefined,
							coverageAmountList: item.coverageAmountList,
							irrespectiveType: '1',
						});
					});

					// insuranceList.forEach(item => {
					// 	this.$set(item, 'selectedType', '1');
					// 	this.$set(item, 'operationType', '2');
					// 	this.$set(
					// 		item,
					// 		'insuranceItemNameKey',
					// 		item.insuranceItemId,
					// 	);
					// 	this.$set(
					// 		item,
					// 		'insuranceItemNameVal',
					// 		item.insuranceItemName,
					// 	);
					// 	this.$set(
					// 		item,
					// 		'isCoverageAmount',
					// 		item.isCoverageAmount?.toString(),
					// 	);
					// 	this.$set(item, 'sumInsuredVal', undefined);
					// });
					this.$set(this.currentInfoData, 'insuranceList', arr);
				}
			},
			change_insuranceCompanyKey({ val, item }) {
				this.$set(
					this.currentInfoData,
					'insuranceCompanyVal',
					item.label,
				);
			},
			change_insuranceBuyType({ val, item }) {
				this.$set(
					this.currentInfoData,
					'insuranceBuyModeType',
					undefined,
				);
				// 是否包含维保
				this.$set(this.currentInfoData, 'maintenanceType', undefined);
				// 供应商
				this.$set(this.currentInfoData, 'maintenanceType', undefined);
				// 维保套餐
				this.$set(
					this.currentInfoData,
					'maintenanceMealType',
					undefined,
				);
				// 维保套餐列表
				this.$set(this.currentInfoData, 'maintenanceList', []);
			},
			change_lessorId({ val, item }) {
				this.$set(this.currentInfoData, 'lessorName', item.deptName);
			},
		},
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this._resetFields([
					{
						data: this.currentInfoData,
					},
					{
						ref: 'form1',
						data: this.currentInfoData,
					},
				]);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		.title {
			border-bottom: 1px solid #e9e9e9;
			font-weight: 500;
			padding-bottom: 10rpx;
			margin-bottom: 10rpx;
		}
	}
	.handler-xicon {
		opacity: 0;
	}
</style>
